import { CaretRightOutlined, CaretDownOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import React, { FC, useMemo } from "react";
import { FieldTypes, JSONSchemaLine, _ } from "./utils";
import { Button, Col, Dropdown, Input, Row, Select, Tooltip } from 'antd';
export * from "./utils";
import styles from './style.less';

export interface JSONLineProps {
    line: JSONSchemaLine;
    onToggle: () => void;
    onDelete: () => void;
    onAddChild: () => void;
    onAddAfter: () => void;
    onUpdate: (line: JSONSchemaLine) => void;
}
const JSONLine: FC<JSONLineProps> = (props) => {
    const { line, onToggle, onDelete, onAddAfter, onAddChild, onUpdate } = props
    const indent = (line.deepth + 1) * 24

    const onChange = useMemo(function () {
        return (keypath: string[], value: any) => {
            const [ f1, f2 ] = keypath
            const result = _.set(line, keypath, value, true)
            const { $schema, type, mock, description } = result.schema
            if (f1 === 'schema' && f2 === 'type') {
                switch (type) {
                    case 'object':
                        result.schema.properties = {
                            field_1: {
                                type: 'string'
                            }
                        }
                        break
                    case 'array':
                        result.schema.items = {
                            type: 'string'
                        }
                        break;
                    default:
                        result.schema = { $schema, type, mock, description }
                }
            }
            onUpdate?.(result)
        }
    }, [line, onUpdate])

    return !line.hidden && <Row className={styles.line} gutter={8}>
        <Col span={9}>
            <span className={styles.indent} style={{
                width: indent,
            }} onClick={line.isLeaf ? undefined : onToggle}>
                {!line.isLeaf && (line.isClose ? <CaretRightOutlined/> : <CaretDownOutlined/>)}
            </span>
            <Input
                disabled={line.autoName}
                defaultValue={line.field}
                onChange={e => onChange(['field'], e.target.value)}
                style={{
                    width: `calc(100% - ${indent}px)`
                }}/>
        </Col>
        <Col span={3}>
            <Select
                style={{ width: '100%' }}
                options={FieldTypes.map(value => ({ value }))}
                onSelect={v => onChange(['schema', 'type'], v)}
                value={line.schema.type}
                />
        </Col>
        <Col span={4}>
            <Input
                disabled={!line.isLeaf}
                placeholder='mock'
                onChange={e => onChange(['schema', 'mock'], e.target.value)}
                defaultValue={line.schema.mock}
                />
        </Col>
        <Col span={5}>
            <Input
                placeholder='备注'
                onChange={e => onChange(['schema', 'description'], e.target.value)}
                defaultValue={line.schema.description}
                />
        </Col>
        <Col span={3}>
            {!line.autoName && <Button size="small" type="link" onClick={onDelete}><DeleteOutlined /></Button>}
            {!line.autoName && line.schema.type === 'object' && <Tooltip title="添加兄弟/子节点">
                <Dropdown menu={{
                    items: [
                        { key: "1", label: '添加兄弟节点', onClick: onAddAfter },
                        { key: "2", label: '添加子节点', onClick: onAddChild },
                    ]
                }}>
                    <Button size="small" type="link" onClick={onAddAfter}>
                        <PlusOutlined/>
                    </Button>
                </Dropdown>
            </Tooltip>}
            {!line.autoName && line.schema.type != 'object' && <Tooltip title="添加兄弟节点">
                <Button size="small" type="link" onClick={onAddAfter}>
                    <PlusOutlined/>
                </Button>
            </Tooltip>}
            {line.autoName && line.schema.type === 'object' && <Tooltip title="添加子节点">
                <Button size="small" type="link" onClick={onAddChild}>
                    <PlusOutlined/>
                </Button>
            </Tooltip>}
            
        </Col>
    </Row>
}

export default JSONLine